<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="bg-gray-200">
    <div class="text-center pt-20 bg-white overflow-hidden">
      <img :src="brandLogo" class="h-32 w-32 rounded-1" alt="" />
      <h2 class="text-5xl">{{ jobName }}</h2>
      <h3>{{ brandName }}</h3>
    </div>
    <div class="flex justify-around bg-white">
      <span>{{ salaryDesc }}</span>
      <span>{{ cityName }}·{{ areaDistrict }}</span>
    </div>
    <div class="p-12 bg-white">
      <h3 class="py-12 text-5xl">岗位要求</h3>
      <van-tag color="#FD7753" class="m-4" v-for="item in jobLabels">{{
        item
      }}</van-tag>
    </div>
    <div class="p-12 bg-white mt-5">
      <h3 class="py-12 text-5xl">福利待遇</h3>
      <van-tag color="#FD7753" class="m-4" v-for="item in welfareList">{{
        item
      }}</van-tag>
    </div>
  </div>
  <div class="p-12 bg-white">
    <h3 class="py-12 text-5xl">推荐岗位</h3>
  </div>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="handleLoad"
    :offset="0"
  >
    <div class="flex flex-wrap justify-between px-8 mt-7">
      <job-item v-for="item in jobList" :jobdata="item" />
    </div>
  </van-list>
  <div class="fixed left-0 bottom-0 w-full bg-white flex p-8 box-border">
    <div class="w-30 h-30 flex justify-center items-center collect">
      <i class="iconfont icon-bookmark-o"></i>
    </div>
    <div class="flex-1 px-4">
      <van-button color="#FD7753" block @click="handleJoin"
        >立即申请</van-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { jobDetailGet } from "../api/pro";
import { useAccount } from "../store/user";
import { useJobList } from "../hooks/job";
// 提取路由参数
const route = useRoute();
const { id } = route.params;
console.log(id);
let res = await jobDetailGet(id as string); //setup标签区域默认直接支持顶层await
console.log(res);
const {
  brandLogo,
  jobName,
  brandName,
  salaryDesc,
  cityName,
  areaDistrict,
  jobLabels,
  welfareList,
} = res.data;

//立即申请
const user = useAccount();
const router = useRouter();
const handleJoin = () => {
  //未登录
  if (!user.userInfo) {
    router.push("/login");
    return;
  }
  //信息不完整
  let { name, resume } = user.userInfo;
  if (!resume || !name) {
    router.push("/edit");
    return;
  }
  //执行申请操作
};

// 岗位列表分页
const { loading, finished, jobList, handleLoad } = useJobList();
</script>

<style lang="scss" scoped>
.collect {
  border: 1px solid rgba(238, 238, 238, 1);
}
</style>
